<link href="/css/admin/fullcalendar.css" rel="stylesheet">
<link rel='stylesheet' type='text/css' href='/css/admin/theme.css' />
<style type="text/css">
    .dashboard-wrapper .left-sidebar{
        margin-right:0px;
    }
</style>
<div class="sub-nav">
    <ul>
        <li><a href="" class="heading">日历</a></li>
    </ul>
</div>
<div class="dashboard-wrapper">
    <div class="left-sidebar">
        <div class="row-fluid">
            <div class="span12">
                <div class="widget no-margin">
                    <div class="widget-header">
                        <div class="title">
                            Calendar
                        </div>
                        <span class="tools">
                            <a class="fs1" aria-hidden="true" data-icon="&#xe090;"></a>
                        </span>
                    </div>
                    <div class="widget-body">
                        <div id='calendar'>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/admin/jquery-ui-1.8.23.custom.min.js"></script>
<script src="/js/admin/fullcalendar.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        calendar = $('#calendar').fullCalendar({
            theme: true,
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent', {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                            );
                }
                calendar.fullCalendar('unselect');
            },
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            events: [{
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                }, {
                    title: 'Long Event',
                    start: new Date(y, m, d - 5),
                    end: new Date(y, m, d - 2)
                }, {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d - 3, 16, 0),
                    allDay: false
                }, {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d + 4, 16, 0),
                    allDay: false
                }, {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                }, {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                }, {
                    title: 'Birthday Party',
                    start: new Date(y, m, d + 1, 19, 0),
                    end: new Date(y, m, d + 1, 22, 30),
                    allDay: false
                }]
        });
    });
</script>